<!--
 * @Description: 订单tab
 * @Author: charles
 * @Date: 2021-12-14 20:42:55
 * @LastEditors: charles
 * @LastEditTime: 2021-12-21 10:27:43
-->
<template>
  <div class="order">
    <van-nav-bar title="我的工单" />
    <van-tabs v-model="active" @click="clickTabs">
      <van-tab title="进行中">
        <van-list v-show="isIngOrdersActive">
          <van-cell v-for="(item, index) in orderList" :key="index" @click="$router.push({ path: '/manager/myOrderDetail', query: { id: item.engineer_id } })">
            <span style="float: left;margin-top: 31px;">
              <i class="iconfont icon-gongdan" style="font-size: 65px;margin-right: 10px"></i>
            </span>
            <div style="display: inline-block;line-height: 30px;font-size: 16px">
              <div><b>工单状态：</b><span style="color: red">{{ item.status }}</span></div>
              <div><b>工单类型：</b><span><el-tag :type="item.type === '安装'?'success':item.type === '维修'?'warning':'danger'">{{ item.type }}</el-tag></span></div>
              <div><b>申报时间：</b><span>{{ item.create_time | datefmt }}</span></div>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="已完成">
        <van-list v-show="isDoneOrdersActive">
          <van-cell v-for="(item, index) in orderList" :key="index" @click="$router.push({ path: '/manager/myFinishOrderDetail', query: {  engineer_id: item.id } })">
            <span style="float: left;margin-top: 49px;">
              <i class="iconfont icon-gongdanqueren" style="font-size: 65px;margin-right: 10px"></i>
            </span>
            <div style="display: inline-block;line-height: 30px;font-size: 16px">
              <div><b>工单状态：</b><span style="color: red">{{ item.status }}</span></div>
              <div><b>工单类型：</b><span><el-tag :type="item.type === '安装'?'success':item.type === '维修'?'warning':'danger'">{{ item.type }}</el-tag></span></div>
              <div><b>申报时间：</b><span>{{ item.create_time | datefmt }}</span></div>
              <div><b>完成时间：</b><span>{{ item.finish_time | datefmt }}</span></div>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import {get} from "@/utils/request";

export default {
  data(){
    return{
      active:0,
      orderList:[],
      isDoneOrdersActive: false,
      isIngOrdersActive: true,
    }
  },
  methods: {
    clickTabs(name, title){
      if(title === '进行中'){
        this.queryIngOrders()
        this. isDoneOrdersActive = false
        this. isIngOrdersActive = true
      }
      if(title === '已完成'){
        this.queryDoneOrders()
        this. isIngOrdersActive = false
        this. isDoneOrdersActive = true
      }
    },
    queryIngOrders(){
      get("/workorder/pageQuery", {page: 1, pageSize: 100, status: '进行中'}).then((res) => {
        this.orderList = res.data.list;
      });
    },
    queryDoneOrders(){
      get("/workorder/pageQuery", {page: 1, pageSize: 100, status: '已完成'}).then((res) => {
        this.orderList = res.data.list;
      });
    },
  },
  created() {
    this.queryIngOrders()
  }
}
</script>
<style scoped>
@import "//at.alicdn.com/t/font_3113095_c8bj4cyds0t.css";

</style>
